<template>
    <div>
        <van-nav-bar title="商品搜索" left-text="返回" left-arrow @click-left="($router.push('/home/index'))" />
        <van-search v-model="value" show-action placeholder="请搜索内容" @search="onSearch">
            <template #action>
                <div @click="onClickButton"><button style="background: red;border: none;color: #fff;">搜索</button></div>
            </template>
        </van-search>
        <div v-show="xs">
             <van-cell title="华为店铺" icon="shop-o">
            <!-- 使用 right-icon 插槽来自定义右侧图标 -->
            <template #right-icon>
                <van-icon name="search" class="search-icon" />
            </template>
        </van-cell>
        <van-cell value="平板">
            <!-- 使用 title 插槽来自定义标题 -->
            <template #title>
                <span class="custom-title">华为</span>

            </template>
        </van-cell>
        <van-cell value="手机">
            <!-- 使用 title 插槽来自定义标题 -->
            <template #title>
                <span class="custom-title">华为mate60</span>
            </template>
        </van-cell>
          <van-cell value="">
            <!-- 使用 title 插槽来自定义标题 -->
            <template #title>
                <span class="custom-title">华为手表</span>
            </template>
        </van-cell>
         <van-cell value="耳机">
            <!-- 使用 title 插槽来自定义标题 -->
            <template #title>
                <span class="custom-title">华为耳机</span>
            </template>
        </van-cell>
        <van-cell value="">
            <!-- 使用 title 插槽来自定义标题 -->
            <template #title>
                <span class="custom-title">京东自营官方店铺</span>
            </template>
        </van-cell>

        </div>
       
        
        <div v-for="item in search" >

            <van-card :price="item.goods_price" :title="item.goods_name"
                :thumb="item.goods_small_logo ? item.goods_small_logo : 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg'" />

        </div>



    </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import { searchApi } from '@/api/api';
let search = ref([])
let value = ref('')
let xs=ref(true)
watch(value, (val) => {
    searchApi(val).then(res => {
        console.log('搜索', res)
        search.value = res.data.message.goods
        xs.value=false
    })
})




</script>

<style lang="scss" scoped></style>